

class domConten extends HTMLElement {

  static get observedAttributes() {
    // 定义属性
    return [];
  }

  constructor() {
    // 必须首先调用 super 方法
    super();
    // 导航按钮
    this.navList = ['INSTANT 3D PRINT QUOTE', 'PRINT APPLICATIONS', 'SLS 3D PRINTERS', 'MATERIAL SALES', 'INDUSTRIES'];
    // 导航索引；
    this.navIndex = 0;



    const shadowRoot = this.attachShadow({ mode: 'open' });
    // 公共css样式
    const linkElem = document.createElement("link");
    linkElem.setAttribute("rel", "stylesheet");
    linkElem.setAttribute("href", "./css/style.css");
    shadowRoot.appendChild(linkElem);
    const indexLink = document.createElement("link");
    indexLink.setAttribute("rel", "stylesheet");
    indexLink.setAttribute("href", "./index.css");
    shadowRoot.appendChild(indexLink);

    const sheet = new CSSStyleSheet();
    sheet.replaceSync(`

      .header_nav {
          font-size: 18px;
          color: #555;
          padding:16px 0;
      }
      .nav_li{
        height:40px;
        padding:0 14px;
        border-radius:120px;
        margin:0 16px;
        cursor:pointer;
      }
      .nav_li.select{
        background:#3AA2FA;
        color:#fff;
      }
    `);
    shadowRoot.adoptedStyleSheets = [sheet];



    const headerDiv = document.createElement("div");
    headerDiv.setAttribute('class', 'header_nav b_content flex_center flex_items');
    shadowRoot.appendChild(headerDiv);

    let that = this;
    this.navList.forEach((v, i) => {
      let header_r_span = document.createElement("span");
      header_r_span.setAttribute('index', i);
      header_r_span.setAttribute('class', 'nav_li flex_center');
      if (that.navIndex == i) header_r_span.classList.add('select');
      header_r_span.innerText = v;
      header_r_span.onmouseenter = function () {
        // 删除原选中class
        let header_r_select = headerDiv.getElementsByClassName("select");
        if (header_r_select && header_r_select.length > 0) header_r_select[0].classList.remove('select')
        // 添加点中class
        let index = this.getAttribute('index');
        that.navIndex = index;
        headerDiv.getElementsByClassName('nav_li')[that.navIndex].classList.add("select");
      }
      headerDiv.appendChild(header_r_span);
    })
  }
  // 生命周期：首次被插入文档DOM时
  connectedCallback() {
    console.log("自定义元素添加至页面。");
  }
  // 生命周期：从文档DOM中删除时
  disconnectedCallback() {
    console.log("自定义元素从页面中移除。");
  }
  // 生命周期：被移动到新的文档时
  adoptedCallback() {
    console.log("自定义元素移动至新页面。");
  }

  // 生命周期：监听属性变化
  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`属性 ${name} 已变更${newValue},原内容${oldValue}`);
    // this[name] = newValue;
  }
}
customElements.define('haeder-nav', domConten);
